<template>
  <div class="panel">
    <div class="chart-tab">
      <ul class="chart-tab-ul">
        <li class="tit">
          <p v-for="(item, index) in tableData.tit" :key="index">{{item}}</p>
        </li>
        <li v-for="(item, index) in tableData.content" :key="index" class="content">
          <p>{{index + 1}}</p>
          <p v-for="(ite, j) in item" :key="j">{{ite}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Object
    }
  },
  data() {
    return {
      // tableData: {
      //   tit: [],
      //   content: []
      // }
    }
  },
  methods: {
    getTableData() {
      // this.tableData.tit = this.chartData[0]
      // this.tableData.content = this.chartData.filter((v, i) => i>0)
    },
    // 导出数据
    exportData() {
      let aoa = []
      let content = []
      this.tableData.content.forEach((v, i) => {
        content.push([i+1, ...v])
      })
      aoa = [this.tableData.tit, ...content]
      var ws = XLSX.utils.aoa_to_sheet(aoa);/* 新建空workbook，然后加入worksheet */
      var wb = XLSX.utils.book_new();/*新建book*/
      XLSX.utils.book_append_sheet(wb, ws, name);/* 生成xlsx文件(book,sheet数据,sheet命名) */
      XLSX.writeFile(wb, `${this.tableData.tname}.xlsx`);
    }
  },
  watch: {
    // chartData() {
    //   this.getTableData()
    // }
  },
  mounted() {
    // this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.panel {
  position: relative;
  width: 100%;
  margin-bottom: .2rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: $color2;
  .chart-tab {
    width: 100%;
    overflow-x: auto;
    .chart-tab-ul {
      position: relative;
      min-width: max-content;
      li {
        position: relative;
        display: flex;
        width: 100%;
        height: .5rem;
        line-height: .5rem;
        // padding: .08rem 0;
        border-bottom: 1px solid $color115;
        font-size: .12rem;
        &.tit {
          p {
            font-weight: bold;
            color: $color116;
          }
        }
        p {
          flex: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: .75rem;
          line-height: .23rem;
          padding: 0 .1rem;
          font-size: .12rem;
          text-align: center;
          color: $color121;
        }
      }
    }
  }
}
</style>